<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn1">按钮一前置防抖</button>
    <button class="btn2">按钮一后置防抖</button>
    <script>
        // 防抖 ： 连续点击 ，不停触发事件的问题 。 控制 事件 在一段时间内触发一次。 过了这个时间之后 ，又可以继续触发事件。


        // 一、简单的防抖
        // 1.前置防抖 ：先执行逻辑 之后 在防抖，执行保护的时间。
        var timer;  // timer undefined --- >  false;
        document.querySelector(".btn1").onclick = function () {
            clearTimeout(timer);
            if (!timer) { // 逻辑执行的条件是 timer 为false时候。
                console.log("需要执行的逻辑，不能不停的触发,得有个保护的时间");
                // 逻辑执行了之后 ，给 timer  赋值 。
                // timer = "hello";
                // timer = 1;
                // 上一次的 timer 清空掉 
            }
            timer = setTimeout(function () {
                console.log("2s之后了");
                timer = false;
            }, 2000);

        }
/* 
                第一点击  ：  timer ---> undefined -->false  ---> 进入if 判断 打印 ---》 timer =1   -- 过2秒之后  timer = false->
                第二次点击 ：  没有过2秒点击  上次 timer 清空   ---> if 不会进入 --》 timer 重新 赋值  timer = 2  . 第三次 第四次 ...
                             过了2秒    timer =  false  清空false 没有意义 - -》 timer = false  进入if  判断 执行代码   ----》 又会给timer 赋值 。 timer 继续有值 。timer  =  3；
                             
        
        
        */

    // 2.后置防抖 ： 先防抖 然后再执行逻辑 ，过完事件的保护期后执行 逻辑
    var timer;
    document.querySelector(".btn2").onclick = function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            console.log("2s之后了");
            console.log("需要执行的逻辑，不能不停的触发,得有个保护的时间");
            timer = null;
        }, 2000);
    }




    </script>
</body>

</html>